@charset "utf-8";
.box1 {
    width: 500px;
    height: 500px;
    background-color: #E3CDCD;
}
.box2 .box2.son {
    height: 100px;
    width: 300px;
}
.box1 .item1 {
    height: 100px;
    width: 33.333%;
    float: left;
    background-color: #E02528;
}
.box1 .item2 {
    background-color: #0FD747;
    width: 33.333%;
    height: 100px;
    float: left;
}

.box1 .item3 {
    background-color: #2F21CC;
    width: 33.333%;
    height: 100px;
    float: left;
}
.box2 {
    width: 500px;
    height: 500px;
    background-color: #E6C6C7;
}

.box2 .item2 {
    background-color: #DC0FAE;
    width: 100px;
    height: 100px;
}


.box2 .item1 {
    background-color: #B0292B;
    width: 300px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
.flex   {
    display: flex;
}

.box2 .item3 {
    background-color: #165891;
    width: 100px;
    height: 100px;
}
